<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>腕带仓库管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
  <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
</head>

<body style="padding: 20px;">
  <!-- 页面结构 -->
  <div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">腕带仓库列表</blockquote>
    <!-- 模糊搜索表单 -->
    <div id="add-que-layer" style="padding: 20px">
	    <form id="add-que-form" onsubmit="return false;" class="layui-form layui-form-pane">
		  <div class="layui-form-item">
		  	<div class="layui-input-inline" style="width: 40%;">
		  		<input type="text"  id="que_condition" name="condition" placeholder="使用全局搜索，请输入关键词"
	          style="border-radius: 35px;" class="layui-input"  autocomplete="off">
		  	</div>
		  	<label class="layui-form-label">选择类型</label>
		    <div class="layui-input-inline">
				<select id="query_type_id" name="query_type_id" class="select" >
					
				</select>
		    </div>
		    <div class="layui-input-inline">
	          <button class="layui-btn" lay-submit lay-filter="add-que-form-submit" >查&nbsp;&nbsp;询</button>
	          <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空条件</button>
	        </div>
		  </div>
	    </form>
  	</div>
  	<!-- 模糊搜索表单结束 -->
    <!-- 添加按钮 -->  
    <a class="layui-btn layui-btn-sm" id="add-ws-btn" lay-event="" >添加腕带</a>
    <a class="layui-btn layui-btn-sm "  id="test1" lay-event="" >批量添加</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger"  id="deleteList" lay-event="">删除选中</a>
    <!--腕带仓库表 -->
    <table id="ws-tbl" lay-filter="ws-tbl"></table>
	
    <script type="text/html" id="ws-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="updateWS">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteWS">删除</a>
    </script>
  </div>
  
  <!-- 添加腕带仓库弹出层 -->
  <div id="add-ws-layer" style="display: none; padding: 20px">
    <form id="add-ws-form" class="layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
          <input type="text" id="add_wriststrp_id" name="wriststrp_id" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带序列号</label>
        <div class="layui-input-block">
          <input type="text" id="add_serial_numbers" name="serial_numbers" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
	  <div class="layui-form-item">
	  	<label class="layui-form-label">所属类型</label>
	    <div class="layui-input-inline">
			<select id="add_type_id" name="add_type_id" class="select">
				
			</select>
	    </div>
	  </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="add-ws-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 更新腕带仓库弹出层 -->
  <div id="update-ws-layer" style="display: none; padding: 20px">
    <form id="update-ws-form" class="layui-form layui-form-pane" lay-filter="update-ws-form">
      <div class="layui-form-item" >
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
          <input type="text" name="wriststrp_id" id="up_wriststrp_id" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带序列号</label>
        <div class="layui-input-block">
          <input type="text" name="serial_numbers" id="up_serial_numbers" class="layui-input" lay-verify="required" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带类型</label>
	    <div class="layui-input-inline">
			<select id="up_type_id" name="type_id" class="select">
				
			</select>
	    </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">腕带状态</label>
	    <div class="layui-input-inline">
			<select id="up_state" name="state" class="select">
				<option value="0">闲置中</option>
				<option value="1">使用中</option>
				<option value="2">已挂失</option>
			</select>
	    </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="update-ws-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary" lay-filter="update-ws-form-reset" >重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 页面JS -->
  <script>
    layui.use(['jquery', 'table', 'layer', 'form','upload'], function() {
      // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
      var $ = layui.$;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var upload = layui.upload;
      
      // 批量添加
	  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
	    ,url: '/wristStrap/import' //上传接口
	    ,accept: 'file'
	    ,done: function(data){
	    	if (data.code == 1) {
				layer.close(layer.index);
				layer.msg(data.msg);
				table.reload('ws-tbl');
			} else {
				layer.msg(data.msg);
			}
	    	
	    }
	    ,error: function(){
	    	layer.msg("操作失败，请联系管理员");
	    }
	  });
      
      // 显示所有腕带仓库
      table.render({
        elem: '#ws-tbl',
        url: '[[@{/wristStrap/getall}]]',//请求地址+'?condition='+$("#con").val()+'&type_id='+$("#cy").val()
        method: 'get',
        page:true,
        cols: [ [
          {type:'checkbox',title:"选择"},
          {field: 'wriststrp_id', title: '序号',sort:true},
          {field: 'serial_numbers', title: '腕带序列号'},
          {templet:function(data){
        	  return data.wriststrpType.type_name;
          },title:'腕带类型'},
          {templet:function(data){
        	  switch(data.state){
        	  	case 0:
        	  		return "闲置中";
        	  		break;
        	  	case 1:
        	  		return "使用中";
        	  		break;
        	  	case 2:
        	  		return "已挂失";
        	  		break;
        	  	case 3:
        	  		return "已删除";
        	  		break;
        	  	default:
        	  		return "未知状态";
        	  		break;
        	  }
          },title:'腕带状态'}
          ,{toolbar: '#ws-tbl-toolbar', title: '操作'}
        ] ],
        // 表格容器id，用于表格重载
        id: 'ws-tbl',
      });
      
      
	   
	// 显示添加腕带仓库弹出层
	$('#add-ws-btn').click(function() {
		// 每次显示前重置表单
	    $('#add-ws-form')[0].reset();
	    layer.open({
	        type: 1,
	        title: '添加腕带',
	        skin: 'layui-layer-molv',
	        area: ['600px'],
	        content: $('#add-ws-layer')
	    });
	});
	
	// 显示添加腕带仓库弹出层
	$('#deleteList').click(function(obj) {
		// 每次显示前重置表单
		var checkStatus = table.checkStatus('ws-tbl'); //idTest 即为基础参数 id 对应的值
		var data = obj.data;
		data = checkStatus.data;
		if(data.length==0){
			layer.msg("请至少选中一项！");
			return;
		}
		var arr = new Array();
		for(var i=0;i<data.length;i++){
			arr[i] = data[i].wriststrp_id;
		}
		$.ajax({
			url: "[[@{/wristStrap/deletelist}]]"+"?wriststrp_id="+arr,
			type: "POST",
			//contentType: 'application/json',
			dataType: 'json',
			success: function(data) {
				if (data.code == 1) {
					layer.close(layer.index);
					layer.msg(data.msg);
					table.reload('ws-tbl');
				} else {
					layer.msg(data.msg);
				}
			},
			error: function() {
				console.log("ajax error");
			}
        });
		
	});
		  
	
    // 添加腕带表单提交
    form.on('submit(add-ws-form-submit)', function(data) {
        // ajax方式添加腕带仓库
        $.ajax({
			url: "[[@{/wristStrap/insertOne}]]",
			type: "POST",
			data: {
				wriststrp_id:$("#add_wriststrp_id").val(),
				type_id:$("#add_type_id").val(),
				serial_numbers:$("#add_serial_numbers").val()
			},
			//contentType: 'application/json',
			dataType: 'json',
			success: function(data) {
				if (data.code == 1) {
					layer.close(layer.index);
					layer.msg(data.msg);
					table.reload('ws-tbl');
				} else {
					layer.msg(data.msg);
				}
			},
			error: function() {
				console.log("ajax error");
			}
        });
        // 阻止表单跳转
        return false;
    });
    
 // 点击搜索按钮
	form.on('submit(add-que-form-submit)', function(){
	    // 重新渲染表格
	    table.reload('ws-tbl',{
	        where:{
	        	'condition':$("#que_condition").val(),
	        	'type_id':$("#query_type_id").val()
	        }
	    });
	 	// 阻止表单跳转
	    return false;
	});
	// 点击重置按钮
	// 监听重置按钮,隐藏附加条件
	 $("#reset").on('click',function(){
		// 清除where条件
		table.reload('ws-tbl',{
			where:null,
			page: {
                curr: 1 //重新从第 1 页开始
            }
		});
		 
	 });
      
    // 监听行工具栏事件：删除腕带仓库与更新腕带仓库
    table.on('tool(ws-tbl)', function(obj) {
		// 获取当前行数据和lay-event的值
		var data = obj.data;
		var event = obj.event;
			
		// 删除腕带仓库事件
		if (event === 'deleteWS') {
			layer.confirm('确定删除该腕带吗？', function(index) {
			// ajax方式删除腕带仓库
			$.ajax({
				url:'[[@{/wristStrap/deleteOne}]]',
				type: "POST",
				data:{
					wriststrp_id:data.wriststrp_id	  
				},
				dataType: 'json',
				success: function(data){
					if (data.code == 1) {
						layer.msg(data.msg);
						table.reload('ws-tbl');
					} else {
						layer.msg(data.msg);
					}
				},
				error: function() {
					console.log("ajax error");
				}
				});
				layer.close(index);
			});
		}
			
		// 更新事件 修改
		if (event === 'updateWS'){
			// 每次显示更新腕带仓库的表单前自动为表单填写该行的数据
			form.val('update-ws-form',{
				"wriststrp_id": data.wriststrp_id,
				"serial_numbers": data.serial_numbers,
				"type_id": data.type_id,
				"state": data.state
			});
			// 显示更新腕带仓库表单的弹出层
			layer.open({
				type: 1,
				title: '修改',
				skin: 'layui-layer-molv',
				area: ['500px'],
				content: $('#update-ws-layer')
			});
			// 更新腕带仓库表单提交
			form.on('submit(update-ws-form-submit)',function(data) {
				// ajax方式更新腕带仓库
				$.ajax({
					url:"[[@{/wristStrap/updateOne}]]",
					type:"POST",
					data:{
						wriststrp_id:$("#up_wriststrp_id").val(),
						type_id:$("#up_type_id").val(),
						state:$("#up_state").val(),
						serial_numbers:$("#up_serial_numbers").val()
					},
					dataType:'json',
					success:function(data) {
						if (data.code == 1) {
							layer.close(layer.index);
							layer.msg(data.msg);
							table.reload('ws-tbl');
						} else {
							layer.msg(data.msg);
						}
					},
					error: function() {
						console.log("ajax error");
					}
				});
				// 阻止表单跳转
				return false;
			}); 
		} 
		// 阻止表单跳转
	    return false;
    });
});
    //更新本页所有下拉选项（腕带类型）
    function querySelect(){
        var types = "";
        	$.ajax({
	            type:"POST",
	            url:'[[@{/wriststrpType/getall}]]',  //从数据库查询所有腕带类型
	            dataType: "json",
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            async: false,
	            cache: false,
	            success: function (data) {
	            	for(var i=0;i<data.data.length;i++){
	            		types += "<option value="+data.data[i].type_id+">"+data.data[i].type_name+"</option>";
	            	}
	                $("#up_type_id").html(types); 
	                $("#add_type_id").html(types);
	                $("#query_type_id").html("<option value='-1'>不使用类型搜索</option>"+types);
	            }
	           
       		});
    }
    $(function(){
  	  // 入口函数，调用更新下拉框方法
  	  querySelect();
  	  // 重新渲染
    });
  </script>
</body>

</html>